@include('blog::layouts.header')
<article>
  <div class="lbox">
    <div class="content_box whitebg">
        <h1 class="con_tilte">{{$article_info['title']}}</h1>
	    <p class="bloginfo">
		    <span>创建时间：</span>
		    <span>{{$article_info['created_at']}}</span>
		    <span><a>{{$article_info['pv']}}</a>人已围观</span>
	    </p>
		{!! $article_info['content'] !!}
        <div class="nextinfo" style="margin-top:20px;">
		@if($article_info_s)
          <p>上一篇：<a href="{{ route('blog.index.info',['id'=>$article_info_s->id]) }}">{{$article_info_s->title}}</a></p>
		@endif
		@if($article_info_x)
          <p>下一篇：<a href="{{ route('blog.index.info',['id'=>$article_info_x->id]) }}">{{$article_info_x->title}}</a></p>
		@endif  
        </div>
		<form class="layui-form layui-form-pane" lay-filter="form">
			<input name="blog_article_id" type="hidden" value="{{$article_info['id']}}"/>
			<div class="layui-form-item layui-form-text" style="margin-top:30px;">
				<label class="layui-form-label">评论</label>
				<div class="layui-input-block">
				  <textarea placeholder="请输入评论内容" name="content" lay-verify="content" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
				  <button type="button" class="layui-btn layui-btn-warm" lay-submit="" lay-filter="submit">提交</button>
				</div>
			</div>
		</form>
		<div id="comment">
			@foreach($article_info['comment_many'] as $v)
				<div style="margin-top:20px;">
					<div style="color:#999">{{$v['created_at']}}</div>
					<div style="font-size:16px;margin-top:10px;">{{$v['content']}}</div>
				</div>
			@endforeach
		</div>
		
    </div>
  </div>
  @include('blog::layouts.right')
</article>
@include('blog::layouts.footer')
<script>
	layui.use(['form', 'layer'], function () {
        var form = layui.form,layer = layui.layer,$= layui.jquery;
		form.verify({ 
			content: function(value){
				var length = value.replace("&nbsp;","").replace("\n","").length;
				if(length<3 || length>200){
					return '请输入评论内容（3-200个字符）！';
				}
			}
		});
        //提交监听
        form.on('submit(submit)', function (data) {
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $.post("{{ route('blog.index.comment') }}",data.field,function(res){ 
				layer.close(loading); 
                if(res.status == 1){
					var info =res.info;
					var html = '';
					for(var i=0;i<info.length;i++){
						html += '<div style="margin-top:20px;">';
						html +=	'<div style="color:#999">'+info[i].created_at+'</div>';
						html +=	'<div style="font-size:16px;margin-top:10px;">'+info[i].content+'</div>';
						html += '</div>';
					}
                    $('#comment').html(html);
                }else{
                    layer.msg(res.error,{icon: 2, time: 1000});
                }
            });
        })
    })
 </script>	